<template>
  <div class="common-statistics">
    <stats-card
        title="计划总数" color="#CA6C65" unit="个" icon="iconfont icon-richeng"
        :value="planStore.planStats.totalCount" />

    <stats-card
        title="完成总数" color="#6FBB69" unit="个" icon="iconfont icon-wancheng"
        :value="planStore.planStats.completedCount" />

    <stats-card
        title="当前计划" color="#E4BF62" unit="个" icon="iconfont icon-dangqianjihua"
        :value="planStore.planStats.currentCount" />

    <stats-card
        title="过期计划" color="#5470C6" unit="个" icon="iconfont icon-yuqi"
        :value="planStore.planStats.remainCount" />
  </div>
</template>

<script setup lang="ts">
import StatsCard from '@/components/StatsCard.vue'
import { usePlanStore } from '@/store/plan.ts'

const planStore = usePlanStore()
</script>
